<template>
  <div class="dashboard">
    <div ref="mapRef" class="map"></div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from "vue";

import echarts from "@/plugins/echarts.js";
import { useEcharts } from "@/hooks/useEcharts.js";
const emits = defineEmits([]);
const mapRef = ref(null);

const getMapJson = async (mapName: string) => {
  const url = `https://geo.datav.aliyun.com/areas_v3/bound/${mapName}.json`;
  const mapJson = await fetch(url).then((res) => res.json());
  console.log(mapJson, url, "urlurlurl");

  return mapJson;
};

const setOptions = (mapName: string, mapData: any) => {
  return {
    tooltip: {
      show: true,
      formatter: function (params: any) {
        // 根据需要进行数据处理或格式化操作
        if (params && params.data) {
          const { adcode, name, data } = params.data;
          // 返回自定义的tooltip内容
          return `adcode: ${adcode}<br>name: ${name}<br>data: ${data}`;
        }
      },
    },
    visualMap: {
      show: true,
      min: 0,
      max: 100,
      left: "left",
      top: "bottom",
      text: ["高", "低"], // 文本，默认为数值文本
      calculable: true,
      seriesIndex: [0],
      inRange: {
        color: ["#00467F", "#A5CC82"], // 蓝绿
      },
    },
    geo: {
      map: mapName,
      roam: true,
      select: false,
      // zoom: 1.6,
      // layoutCenter: ['45%', '70%'],
      // layoutSize: 750,
      // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
      selectedMode: "single",
      label: {
        show: true,
      },
      emphasis: {
        itemStyle: {
          areaColor: "#389BB7",
          borderColor: "#389BB7",
          borderWidth: 0,
        },
        label: {
          fontSize: 14,
        },
      },
    },
    series: [
      // 数据
      {
        type: "map",
        map: mapName,
        roam: true,
        geoIndex: 0,
        select: false,
        data: mapData,
      },
      // {
      //   name: "散点",
      //   type: "scatter",
      //   coordinateSystem: "geo",
      //   data: mapData,
      //   itemStyle: {
      //     color: "#05C3F9",
      //   },
      // },
      // {
      //   name: "点",
      //   type: "scatter",
      //   coordinateSystem: "geo",
      //   symbol: "pin", //气泡
      //   symbolSize: function (val: any) {
      //     if (val) {
      //       return val[2] / 4 + 20;
      //     }
      //   },
      //   label: {
      //     show: true,
      //     formatter: function (params: any) {
      //       return params.data.data || 0;
      //     },
      //     color: "#fff",
      //     fontSize: 9,
      //   },
      //   itemStyle: {
      //     color: "#F62157", //标志颜色
      //   },
      //   zlevel: 6,
      //   data: mapData,
      // },
      // {
      //   name: "Top 5",
      //   type: "effectScatter",
      //   coordinateSystem: "geo",
      //   data: mapData.map((item: { data: number }) => {
      //     if (item.data > 60) return item;
      //   }),
      //   symbolSize: 15,
      //   showEffectOn: "render",
      //   rippleEffect: {
      //     brushType: "stroke",
      //   },
      //   label: {
      //     formatter: "{b}",
      //     position: "right",
      //     show: true,
      //   },
      //   itemStyle: {
      //     color: "yellow",
      //     shadowBlur: 10,
      //     shadowColor: "yellow",
      //   },
      //   zlevel: 1,
      // },
    ],
  };
};

const initMap = async (mapName) => {
  let chartDom = mapRef.value;
  let myChart = echarts.init(chartDom);
  const mapJson = await getMapJson(mapName);
  // 关键步骤：注册地图数据
  echarts.registerMap(mapName, mapJson);
  const mapdata = mapJson.features.map((item: { properties: any }) => {
    const data = (Math.random() * 80 + 20).toFixed(0); // 20-80随机数
    const tempValue = item.properties.center
      ? [...item.properties.center, data]
      : item.properties.center;
    return {
      name: item.properties.name, //名称
      value: tempValue, // 中心点经纬度
      adcode: item.properties.adcode, // 区域编码
      level: item.properties.level, // 层级
      data, // 模拟数据
    };
  });

  useEcharts(myChart, setOptions(mapName, mapdata));
};

const props = defineProps({});
const state = reactive({});
onBeforeMount(() => {});
onMounted(() => {
  initMap("100000_full");
});
defineExpose({ state });
</script>
<style lang="scss" scoped>
.dashboard {
  width: 100%;
  height: 100%;
  .map {
    width: 100%;
    height: 100%;
  }
}
</style>
